<template>
  <div class="dy-main LivingPaymentHistory">
    <div class="dy-header">
       <x-header :right-options="{showMore: false}" :left-options="{preventGoBack: true,backText: ''}" @on-click-back="back" @on-click-more="showMenus = true">生活缴费</x-header>
    </div>
    <div class="dy-body">
      <div class="topMessage">
          <p slot="title"><img src="../../assets/img/Living/water.png" alt="" class="water"><span>{{nowDate}}</span></p>
          <p slot="value" style="float:right;" @click="selectDateSlot()"><img src="../../assets/img/Deposit/forward.png" alt="" style="width: .2rem;height: .3rem;margin-bottom: -0.1rem;"></p>
      </div>
      <actionsheet v-model="dateSwitch" show-cancel :menus="menus" @on-click-menu="dateClick"></actionsheet>
      <scroller lock-y :scrollbar-x=false>
        <div class="xscroll">
          <p>2018年</p>
        </div>
      </scroller>
      <scroller lock-x height="83%"  @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200">
        <div class="yscroll">
          <div class="financial-buy-result-detail" v-for="(item,index) in livingPayData" :key="index">
            <div><div class="result-item-left">条形码</div><div class="result-item-right">{{item.barCode}}</div></div>
            <div><div class="result-item-left">缴费金额</div><div class="result-item-right">{{item.moneyMent}}元</div></div>
            <div><div class="result-item-left">缴费单位</div><div class="result-item-right">{{item.unitMent}}</div></div>
            <div><div class="result-item-left">缴费时间</div><div class="result-item-right">{{item.dateMent}}</div></div>
          </div>
        </div>
      </scroller>
    </div>
    <div class="dy-footer"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      nowDate: '水费',
      dateSwitch: false,
      menus: {
        menu1: '煤气费',
        menu2: '电费',
        menu3: '水费',
        menu4: '其他'
      },
      livingPayData: [{
        barCode: '4225876765456787987', // 条形码
        moneyMent: '23.99', // 缴费金额
        unitMent: '上海集团有限公司', // 缴费单位
        dateMent: '13：40' // 缴费时间
      },
      {
        barCode: '4225876765456787987', // 条形码
        moneyMent: '23.99', // 缴费金额
        unitMent: '上海集团有限公司', // 缴费单位
        dateMent: '13：40' // 缴费时间
      },
      {
        barCode: '4225876765456787987', // 条形码
        moneyMent: '23.99', // 缴费金额
        unitMent: '上海集团有限公司', // 缴费单位
        dateMent: '13：40' // 缴费时间
      },
      {
        barCode: '4225876765456787987', // 条形码
        moneyMent: '23.99', // 缴费金额
        unitMent: '上海集团有限公司', // 缴费单位
        dateMent: '13：40' // 缴费时间
      },
      {
        barCode: '4225876765456787987', // 条形码
        moneyMent: '23.99', // 缴费金额
        unitMent: '上海集团有限公司', // 缴费单位
        dateMent: '13：40' // 缴费时间
      },
      {
        barCode: '4225876765456787987', // 条形码
        moneyMent: '23.99', // 缴费金额
        unitMent: '上海集团有限公司', // 缴费单位
        dateMent: '13：40' // 缴费时间
      },
      {
        barCode: '4225876765456787987', // 条形码
        moneyMent: '23.99', // 缴费金额
        unitMent: '上海集团有限公司', // 缴费单位
        dateMent: '13：40' // 缴费时间
      },
      {
        barCode: '4225876765456787987', // 条形码
        moneyMent: '23.99', // 缴费金额
        unitMent: '上海集团有限公司', // 缴费单位
        dateMent: '13：40' // 缴费时间
      }],
      aaa: 1
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    toNext () {
      this.$router.push({name: 'LivingPaymentCheckEnt'})
    },
    /**
     * 弹出筛选日期段框
     */
    selectDateSlot () {
      this.dateSwitch = !this.dateSwitch
    },
    /**
     * 选择筛选时间
     * @param key
     * @param item
     */
    dateClick (key, item) {
      this.nowDate = item
    }
  }
}
</script>
<style lang="less">
.LivingPaymentHistory {
  .fot26{
    font-size: .26rem;
  }
  .topMessage{
    width: 100%;
    padding: 0 .27rem;
    background: #fff;
    line-height: .88rem;
    overflow: hidden;
    font-size: .26rem;
    box-sizing: border-box;
    &>p{
      float: left;
      span{
        display: inline-block;
        padding:0 .12rem;
      }
    }
  }
  .title{
    line-height: .94rem;
    font-size: .25rem;
    color: #999;
    padding: 0 .27rem;
  }
  .water{
    width: .36rem;
    height: .39rem;
    vertical-align: sub;
  }
  .station{
    width: .38rem;
    height: .46rem;
    vertical-align: sub;
  }
  .xscroll {
    padding-left:.3rem;
    height:.88rem;
    line-height:.88rem;
    background:rgba(255,255,255,1);
    margin-top:.2rem;
    margin-bottom:.12rem;
  }
  .financial-buy-result-detail{
    font-size:.28rem;
    margin:.2rem .3rem .2rem .3rem;
    padding: 0.26rem .3rem;
    border-radius: .28rem;
    background: #fff;
  }
  .financial-buy-result-detail>div {
      padding: .14rem 0;
      .result-item-left{
      /* display:inline-block; */
        width:30%;
        float: left;
        color:rgba(153,153,153,1);
      }
      .result-item-right{
        display:inline-block;
        text-align: right;
        width:70%;
        color:rgba(51,51,51,1);
      }
    }
}
</style>
